<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Babylon.js Snow Effect</title>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <style>
        canvas {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script>
    var canvas = document.getElementById("renderCanvas");
    var engine = new BABYLON.Engine(canvas, true);

    var createScene = function () {
        var scene = new BABYLON.Scene(engine);

        var camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 5, -10), scene);
        camera.setTarget(BABYLON.Vector3.Zero());
        camera.attachControl(canvas, true);

        var snowMaterial = new BABYLON.StandardMaterial("snowMaterial", scene);
        snowMaterial.diffuseColor = new BABYLON.Color3(1, 1, 1);
        snowMaterial.alpha = 0.8;

        var snowflakes = [];
        for (let i = 0; i < 200; i++) {
            var snowflake = BABYLON.MeshBuilder.CreateSphere("snowflake" + i, { diameter: 0.1 }, scene);
            snowflake.material = snowMaterial;
            snowflake.position = new BABYLON.Vector3(Math.random() * 20 - 10, Math.random() * 10, Math.random() * 20 - 10);
            snowflakes.push(snowflake);
        }

        scene.registerBeforeRender(function () {
            snowflakes.forEach(function (snowflake) {
                snowflake.position.y -= 0.05;
                if (snowflake.position.y < -2) {
                    snowflake.position.y = 10;
                }
            });
        });

        return scene;
    }

    var scene = createScene();

    engine.runRenderLoop(function () {
        scene.render();
    });

    window.addEventListener("resize", function () {
        engine.resize();
    });
</script>
</body>
</html>
